<template>
  <div>
    <!-- 引入列表组件 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.roomList" :pEdit="showRoomPrice"/>
    <div style="text-align: left; margin: 20px;">
      <Power power="/RoomInsert">
        <el-button type="primary" @click="dialogFormVisible = true">新增客房</el-button>
      </Power>
    </div>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="新增客房" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="客房标题" label-width="120px">
          <el-input v-model="roomName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属酒店" label-width="120px">
          <el-select v-model="hId" @change="selectChange()" clearable placeholder="请选择">
              <el-option
                v-for="item in hotelList"
                :key="item.hid"
                :label="item.hotelName"
                :value="item.hid">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客房图片" label-width="120px">
          <el-upload
            class="upload-demo"
            name="file"
            :action="this.utils.myurl.uploadUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="updateSuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="客房数量" label-width="120px">
          <el-input autocomplete="off" v-model="roomNumber"></el-input>
        </el-form-item>
        <el-form-item label="默认价格数量" label-width="120px">
          <el-input autocomplete="off" v-model="roomDefaultPrice"></el-input>
        </el-form-item>
        <el-form-item label="客房描述" label-width="120px">
          <el-input autocomplete="off" v-model="roomContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertRoom()">添 加</el-button>
      </div>
    </el-dialog>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="查看房价" :visible.sync="pricedialogFormVisible">
      <!-- 引入列表组件 -->
      <Table ref="myTable2" :tableTitles="priceTitle" :url="this.utils.myurl.priceList + '?rid=' + this.rid" :pEdit="updatePrice"/>
    </el-dialog>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="修改房价" :visible.sync="updatePricedialogFormVisible">

      <el-form>
        <el-form-item label="日期" label-width="120px">
          {{priceDate}}
        </el-form-item>
        <el-form-item label="价格" label-width="120px">
          <el-input v-model="roomPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="剩余客房" label-width="120px">
          <el-input v-model="phasNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePricedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRoomPrice()">修 改</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import Table from './Table.vue'

  export default {
    name: "RoomManager",
    components: {Table},
    methods: {
      //下拉框改变事件
      selectChange(){
        var citys = this.cityList;
        for(var i = 0; i < citys.length; i++){
          if(citys[i].cid == this.cityId){
            this.cityName = citys[i].cityName + '市';
          }
        }
      },
      handleRemove(file, fileList) {
              console.log(file, fileList);
      },
      handlePreview(file) {
              console.log(file);
      },
      //上传图片
      updateSuccess(file){
        if(file.code == 200){
          this.$message.success("图片上传成功！");
          this.fileList.push(file.data);
          console.log(this.fileList);
        } else {
          this.$message.error(file.msg);
        }
      },
      //查询所有酒店
      queryAllHotel(){
        this.utils.myajax({
          type: "GET",
          url: this.utils.myurl.hotelList,
          success: data => {
            this.hotelList = data;
          }
        });
      },
      //添加客房
      insertRoom(){
        var vt = this;
        this.utils.myajax({
          type: "POST",
          url: this.utils.myurl.roomInsert,
          data: {
            roomName: this.roomName,
            hId: this.hId,
            roomImages: JSON.stringify(this.fileList),
            roomNumber: this.roomNumber,
            roomDefaultPrice: this.roomDefaultPrice,
            roomContent: this.roomContent
          },
          success: function(data){
            vt.$message.success("酒店添加成功！");
            vt.$refs.myTable.goPage();
          }
        });
      },
      /**
       * 查询客房的价格信息
       */
      showRoomPrice(roomInfo){
        this.rid = roomInfo.rid;
        //查询当前客房的价格信息
        this.pricedialogFormVisible = true;
      },
      /**
       * 弹出价格框
       */
      updatePrice(priceInfo){
        this.pid = priceInfo.pid;
        this.roomPrice = priceInfo.pprice;
        this.priceDate = priceInfo.pDate;
        this.phasNumber = priceInfo.phasNumber;
        this.updatePricedialogFormVisible = true;
      },
      /**
       * 提交价格修改信息
       */
      updateRoomPrice(){
        this.utils.myajax({
          type: "POST",
          url: this.utils.myurl.priceUpdate,
          data: {
            pId: this.pid,
            pPrice: this.roomPrice,
            pHasNumber: this.phasNumber
          },
          success: resp => {
            this.$message.success("价格修改成功！");
            this.$refs.myTable2.goPage();
            this.updatePricedialogFormVisible = false;
          }
        });
      }
    },
    data() {
      return {
        roomName: "",
        hId: "",
        fileList: [
        ],
        hotelList: [
        ],
        //房间数量
        roomNumber: "",
        //默认价格数量
        roomDefaultPrice: "",
        //客房描述
        roomContent: "",
        //隐藏dialog
        dialogFormVisible: false,
        //客房价格的弹出框隐藏属性
        pricedialogFormVisible: false,
        //客房价格修改弹出框隐藏属性
        updatePricedialogFormVisible: false,
        titles: [
          {
            prop: 'rid',
            label: 'id',
            width: '50',
            fixed: true
          },{
            prop: 'hid',
            label: '所属酒店',
            width: '100',
            fixed: false
          },{
            prop: 'roomName',
            label: '房间名称',
            width: '150',
            fixed: false
          },{
            prop: 'roomImages',
            label: '房间图片',
            width: '200',
            fixed: false,
            type: "image"
          },{
            prop: 'roomContent',
            label: '客房描述',
            width: '300',
            fixed: false
          },{
            prop: 'roomNumber',
            label: '客房数量',
            width: '200',
            fixed: false
          },{
            prop: 'roomDefaultPrice',
            label: '客房默认价格',
            width: '200',
            fixed: false
          }
        ],
        //客房id - 根据这个id查询客房下的价格列表
        rid: "",
        priceTitle: [
          {
            prop: 'pid',
            label: 'id',
            width: '50',
            fixed: true
          },{
            prop: 'rid',
            label: '所属客房',
            width: '100',
            fixed: false
          },{
            prop: 'pDate',
            label: '日期',
            width: '150',
            fixed: false
          },{
            prop: 'pprice',
            label: '当天价格',
            width: '200',
            fixed: false
          },{
            prop: 'phasNumber',
            label: '剩余房间数',
            width: '100',
            fixed: false
          }
        ],
        pid: "",
        roomPrice: "",
        priceDate: "",
        phasNumber: ""
      }
    },
    mounted(){
      this.queryAllHotel();
    }
  }
</script>

<style>
   #container{
     height: 500px;
     width: 600px
   }
</style>
